<template>
  <div class="father">
    <h3>父组件</h3>
    <h4>{{ username }}</h4>
    <h4>{{ password }}</h4>
    <!-- 1、v-model用在html标签上 -->
    <!-- <input type="text" v-model="username"> -->
    <!-- 其中v-model的底层就是使用的:value和@input实现的 -->
    <!-- <input type="text" :value="username" @input="username = (<HTMLInputElement>$event.target).value"> -->

    <!-- 2、v-model用在组件标签上 -->
    <!-- 其中AtguiInput和el-input一样，都是自定义组件 -->
    <!-- 其中自定义组件使用v-model，既可以父组件给子组件传递数据，也可以将子组件的数据传递给父组件 -->
    <!-- <AtguiguInput v-model="username" />-->
    <br />
    <!-- 下面的是对上面的拆分，因为自定义组件里面可以实现v-model的数据双向绑定，其中update:modelValue是事件名称 -->
    <!-- <AtguiguInput 
      :modelValue="username" 
      @update:modelValue="username = $event"
    /> -->

    <!-- 修改modelValue -->
    <AtguiguInput v-model:ming="username" v-model:mima="password" />
  </div>
</template>

<script setup lang="ts" name="Father">
import { ref } from 'vue'
import AtguiguInput from './AtguiguInput.vue'

// 数据
let username = ref('zhansgan')
let password = ref('123456')
</script>

<style scoped>
.father {
  padding: 20px;
  background-color: rgb(165, 164, 164);
  border-radius: 10px;
}
</style>
